import React, { Component } from "react";
import { withRouter } from 'react-router-dom'
import style from "./ForumPage.module.less";
import demo from '../../assets/image/demo.jpg'
import ona from '../../assets/image/天气之子 天空 手 4k动漫壁纸3840x2160_彼岸图网.jpg'
import two from '../../assets/image/你的名字.jpg'
import three from '../../assets/image/天空+夕阳.jpg'
import four from '../../assets/image/海边女孩6K动漫壁纸.jpg'
import {
    LikeOutlined,
    MessageOutlined,
    EyeOutlined,
    createFromIconfontCN, RightOutlined
} from '@ant-design/icons';
import { Carousel } from 'antd';
import {getForumAllRequest, getFourmImgRequest} from "@requests/Forum";
import Editor from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
import Loading from "@utils/Loading";
let user = JSON.parse(sessionStorage.getItem("user"))
class ForumPage extends Component {
    state = {
        data:null,
    }
    componentDidMount() {
        this.getAll()
    }
    getAll= async () => {
        const response = await getForumAllRequest()
        if(response.code === '200'){
            this.setState({
                data:response.results
            })
        }
        // console.log(response)
    }
    tiaozhuan = (id) => {
        // console.log(id)
        this.props.history.push(`/Forum/ForumDetails/${id}`, id)
    }
    release = () => {
        this.props.history.push('/Forum/Release/')
        // console.log(user)
    }
  render() {
      let IconFont = createFromIconfontCN({
          scriptUrl: '//at.alicdn.com/t/font_3296858_3mz401ycuk4.js',
      });
      if(this.state.data === null){
          return (
            <div style={{ width: '100vw', height: '100vh', backgroundColor: 'white' }}>
                <Loading />
            </div>
          )
      }
      const data = this.state.data
    return (
      <div className="center"  style={{
          display: "flex",
          justifyContent: "space-between",
          marginTop: "1%",
        }}>
        <div className={style.left} >
            <ul>
                {data.map((item,index) => {
                    // console.log(item)
                    return (
                        <li key={index}>
                            <div className = {style.top}>
                                <div className = {style.top_left}>
                                    <img src={process.env.REACT_APP_BASE_URL+item.userImg} alt=""/>
                                    <p className={style.name}>{item.userName}</p>
                                    <p className = {style.time}>{item.createDate}</p>
                                </div>
                                <div className = {style.top_right}><button>关注+</button></div>
                            </div>
                            <div className = {style.center} onClick = {() => { this.tiaozhuan(item.id) }}>
                                <div className={style.center_text}>
                                    <h1>{item.title}</h1>
                                    <div className = {style.textBox}>
                                        <p>{item.text}</p>
                                    </div>
                                </div>
                            </div>
                            <div className = {style.bottom}>
                                <div className = {style.bottom_box}>
                                    <div className = {style.dianzan}>
                                        <LikeOutlined   style={{
                                            fontSize: '18px',
                                            marginRight:'30%'
                                        }}/>
                                        1
                                    </div>
                                    <div className = {style.huifu}>
                                        <MessageOutlined style={{
                                            fontSize: '18px',
                                            marginRight:'30%'
                                        }} />
                                        1
                                    </div>
                                    <div className = {style.look}>
                                        <EyeOutlined style={{
                                            fontSize: '18px',
                                            marginRight:'30%'
                                        }} />
                                        1
                                    </div>
                                </div>
                            </div>
                        </li>
                    )
                })}
            </ul>
        </div>
        <div className={style.right}>
            <div className = {style.swiper}>
                <Carousel effect="fade" autoplay>
                    <div >
                        <img src={ona} alt=""/>
                    </div>
                    <div>
                        <img src={two} alt=""/>
                    </div>
                    <div>
                        <img src={three} alt=""/>
                    </div>
                    <div>
                        <img src={four} alt=""/>
                    </div>
                </Carousel>
            </div>
            <div className = {style.release}>
                <button onClick={this.release}>
                    <IconFont type='icon-iconfontshuru' style={{fontSize:'25px'}} />
                    <p >我要发布</p>
                    <IconFont type = 'icon-iconfonticonfonti2copycopy' style={{fontSize:'25px'}} />
                </button>

            </div>
            <div className={style.body_Popular}>
                <p className={style.reMeng}>
                    <span>最近热门</span>
                    <span>
                      更多
                      <RightOutlined />
                    </span>
                </p>
                <ul>
                    <li>
                        <div className={style.one}>
                            <img src={demo} alt="" />
                        </div>
                        <div className={style.two}>
                            <p>曲谱曲谱曲谱</p>
                        </div>
                    </li>
                    <li>
                        <div className={style.one}>
                            <img src={demo} alt="" />
                        </div>
                        <div className={style.two}>
                            <p>曲谱曲谱曲谱</p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
      </div>
    );
  }
}

export default withRouter(ForumPage)
